<template>
  <div class="swiper-container3">
    <div id="swiper-container">
      <div class="swiper-button-prev3"><div class="buttonleft3"></div></div>
      <div class="swiper-wrapper">
        <swiper
          :modules="modules"
          :autoplay="{ autoplay: true }"
          :navigation="{
            nextEl: '.swiper-button-next3',
            prevEl: '.swiper-button-prev3',
            hiddenClass: 'swiper-button-hidden',
          }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide v-for="(image, index) in images" :key="index">
            <img :src="image.url" class="full-width" />
          </swiper-slide>
        </swiper>
      </div>
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next3"><div class="buttonright3"></div></div>
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </div>
  </div>
</template>
<script>
// 这里需要什么其他功能可以查询文档
import {
  Navigation,
  Pagination,
  Scrollbar,
  Autoplay,
  A11y,
} from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
// 导入插件样式
import "swiper/css";

import "swiper/css/navigation"; // 左右按钮
import "swiper/css/pagination"; // 分页小圆点
import "swiper/css/scrollbar"; //滚动条

export default {
  props: {
    images: {
      type: Array,
      required: true,
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };

    // var onSwiper = new Swiper("#swiper-container", {
    //   navigation: {
    //     nextEl: ".swiper-button-next3",
    //     prevEl: ".swiper-button-prev3",
    //   },
    // });
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, Autoplay, A11y],
    };
  },
};
</script>
<style>
/* .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background-color: rgb(0, 227, 95);
} */
.swiper-container3 {
  --swiper-navigation-size: 0;
  width: 10rem;
}
/* .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 15px);
} */
.full-width {
  width: 90%;
}
.swiper-wrapper {
  /* swiper的样式 */
}
.swiper-button-prev3 {
  /* transform: translateY(-50%); 垂直居中 */
  /* margin-left: 4.5rem; */
  cursor: pointer; /* 鼠标样式 */
}
.swiper-button-next3 {
  position: relative;
  /* transform: translateY(-50%); 垂直居中 */
  cursor: pointer; /* 鼠标样式 */
}
.buttonleft3 {
  top: 10.5rem;
  left: 2rem;
  position: relative;
  width: 1.1rem; /* 宽度 */
  height: 1rem; /* 高度 */
  background-image: url("../assets/切换左箭头.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.buttonright3 {
  top: 10.5rem;
  right: 2rem;
  position: relative;
  width: 1.1rem; /* 宽度 */
  height: 1rem; /* 高度 */
  background-image: url("../assets/切换右箭头.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>